<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--onsubmit="event.preventDefault(); calculate();", 执行calculate方法-->
     <form action="calc/method" method="post" onsubmit="event.preventDefault(); calculate();">
        <h1>计算器</h1>
        数字1: <input id = "num1" name="num1" type="text"><br>
        数字2: <input id = "num2" name="num2" type="text"><br>
        计算结果: <input id = "ret" name = "ret", type = "text"><br>
        <select id = "method" name = "method">
            <option select = "selected">+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="submit" value=" 进行计算 ">
        <script src = "js/jquery-3.7.1.min.js"></script>
        <script>
            function calculate() {
                $.ajax({
                    url : "/calc/method",
                    type : "POST",
                    data : {
                        num1 : $("#num1").val(),
                        num2 : $("#num2").val(),
                        method : $("#method").val()
                    },
                    success : function(result) {
                        $("#ret").val(result);
                    }
                });
            }
        </script>
    </form>

</body>

</html>